<template>
	<div>
		<el-card class="box-card">
			<div class="Serach_b">
				<!-- <el-button type="primary" @click="AddClick()">添加</el-button> -->
				<el-input type="textarea" autosize placeholder="请输入标题" v-model="fy.title" />
				<el-select v-model="storeProvince" placeholder="请选择省份" @change="SearchS1">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
				<el-select v-model="storeCity" placeholder="请选择市" @change="SearchS2">
					<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
				<el-select v-model="storeArea" placeholder="请选择区" @change="SearchS3">
					<el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
				<el-button type="primary" icon="el-icon-search" @click="SearchData()">搜索</el-button>
			</div>
			<el-table :data="StoreList" border>
				<el-table-column prop="uid" label="用户ID" />
				<el-table-column prop="storeName" label="门店名称" />
				<el-table-column prop="storeAddress" label="门店所在省市" />
				<el-table-column prop="storePosition" label="门店具体位置" />
				<el-table-column prop="storeImg" label="门店图片">
					<template slot-scope="scope">
						<el-image :src="scope.row.storeImg" :preview-src-list="StoreList">
						</el-image>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button @click="ClickUpdate(scope.row)">修改</el-button>
						<el-button @click="ClickDel(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-dialog title="修改" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
				<el-form label-position="left" label-width="80px" :model="ObjectList">
					<el-form-item label="门店店主">
						<el-input placeholder="请输入门店店主" v-model="ObjectList.storeShopkeeper"></el-input>
					</el-form-item>
					<el-form-item label="门店电话">
						<el-input placeholder="请输入门店电话" v-model="ObjectList.storePhone"></el-input>
					</el-form-item>
					<el-form-item label="门店名称">
						<el-input placeholder="请输入门店名称" v-model="ObjectList.storeName"></el-input>
					</el-form-item>
					<!-- <el-form-item label="门店所在省市">
            <el-cascader
              v-model="value2"
              :options="options2"
              @change="getCheckedNodes2"
            />
          </el-form-item> -->
					<el-form-item label="门店具体位置">
						<el-input placeholder="请输入门店具体位置" v-model="ObjectList.storePosition"></el-input>
					</el-form-item>
					<el-form-item label="门店图片">
						<el-input placeholder="请输入门店图片" v-model="ObjectList.storeImg"></el-input>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="Addstore()">确 定</el-button>
				</span>
			</el-dialog>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[5, 10]"
				:page-size="fy.size" layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</el-card>
	</div>
</template>

<script>
	import * as StoreManageApi from "@/api/Add";
	export default {
		data() {
			let id = 0;
			return {
				fy: {
					size: 5,
					current: 1,
					storeAddress: "",
					shen: "",
				},
				storeProvince: "",
				storeCity: "",
				storeArea: "",
				total: 0,
				StoreList: [],
				StoreImageList: [],
				LocationId: 1,
				options: [],
				dialogVisible: false,
				ObjectList: {},
				options2: [{
					label: "请输入市",
					value: 0,
				}, ],
				options3: [{
					label: "请输入区",
					value: 0,
				}, ],
				value: "",
				value2: "",
			};
		},
		methods: {
			ClickDel(item) {
				StoreManageApi.DelStoreManage({
					idList: item.id
				}).then((res) => {
					if (res.data == true) {
						this.dialogVisible = false;
						this.SearchData();
						this.$notify({
							title: "成功",
							message: "删除成功",
							type: "success",
						});
					} else {
						this.dialogVisible = false;
						this.SearchData();
						this.$notify({
							title: "失败",
							message: "删除失败",
							type: "error",
						});
					}
				});
			},
			ClickUpdate(item) {
				StoreManageApi.updateStoreManageID({
					id: item.id
				}).then((res) => {
					this.dialogVisible = true;
					this.ObjectList.id = res.data.id;
					this.ObjectList.storeImg = res.data.storeImg;
					this.ObjectList.storeName = res.data.storeName;
					this.ObjectList.storePhone = res.data.storePhone;
					this.ObjectList.storePosition = res.data.storePosition;
					this.ObjectList.storeShopkeeper = res.data.storeShopkeeper;
				});
			},
			Addstore() {
				if (this.ObjectList.id) {
					StoreManageApi.updateStoreManage(this.ObjectList).then((res) => {
						if (res.data == true) {
							this.dialogVisible = false;
							this.SearchData();
							this.$notify({
								title: "成功",
								message: "修改成功",
								type: "success",
							});
						} else {
							this.dialogVisible = false;
							this.SearchData();
							this.$notify({
								title: "失败",
								message: "修改失败",
								type: "error",
							});
						}
					});
				} else {
					StoreManageApi.AddStoreManage(this.ObjectList).then((res) => {
						if (res.data == true) {
							this.dialogVisible = false;
							this.SearchData();
							this.$notify({
								title: "成功",
								message: "新增成功",
								type: "success",
							});
						} else {
							this.dialogVisible = false;
							this.SearchData();
							this.$notify({
								title: "失败",
								message: "新增失败",
								type: "error",
							});
						}
					});
				}
			},
			AddClick() {
				this.dialogVisible = true;
			},
			SearchData() {
				StoreManageApi.SearchStoreManage().then((res) => {
					this.StoreList = res.data.records;
					this.StoreList.forEach((item) => {
						this.StoreImageList.push(item.storeImg);
					});
				});
			},
			SearchS1(data) {
				StoreManageApi.SearchLocation({
					parentId: data
				}).then((res) => {
					this.options2 = res.data.map((item) => {
						return {
							label: item.cname,
							value: item.id,
						};
					});
					this.options.forEach((item) => {
						if (item.value == data) {
							this.fy.storeProvince = item.label;
						}
					});
				});
			},
			SearchS2(data) {
				StoreManageApi.SearchLocation({
					parentId: data
				}).then((res) => {
					this.options3 = res.data.map((item) => {
						return {
							label: item.cname,
							value: item.id,
						};
					});
					this.options2.forEach((item) => {
						if (item.value == data) {
							this.fy.storeCity = item.label;
						}
					});
				});
			},
			SearchS3(data) {
				this.options3.forEach((item) => {
					if (item.value == data) {
						this.fy.storeArea = item.label;
					}
				});
			},
			SearchSQ() {
				StoreManageApi.SearchLocation({
					parentId: 1
				}).then((res) => {
					this.options = res.data.map((item) => {
						return {
							label: item.cname,
							value: item.id,
						};
					});
				});
			},
			handleSizeChange(value) {
				this.fy.size = value;
				this.SearchData();
			},
			handleCurrentChange(value) {
				this.fy.current = value;
				this.SearchData();
			},
			handleClose(done) {
				this.$confirm("确认关闭？")
					.then((_) => {
						done();
					})
					.catch((_) => {});
			},
		},
		created() {
			this.SearchData();
			this.SearchSQ();
		},
	};
</script>

<style>
	.box-card {
		width: 95%;
		margin: auto;
	}

	.Serach_b {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}

	.Serach_b .el-button {
		margin-left: 20px;
	}

	.el-textarea {
		margin-left: 20px;
		width: 30%;
	}

	.Serach_b .el-cascader {
		margin-left: 10px;
	}

	.el-dialog .el-cascader {
		width: 100%;
	}

	.el-input {
		width: 100%;
	}

	.el-select {
		margin-left: 20px;
	}
</style>
